<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="change"
    safeArea
    backgroundColor="#fff"
    :maskClick="true"
    class="i-loginModal"
  >
    <view class="picker">
      <view class="title">
        <text>登录</text>
        <text class="confirm">请选择账号登录</text>
      </view>

      <view class="scroll">
        <i-lineRow
          padding="16rpx 24rpx"
          v-for="(item, index) in userList"
          :key="item.userId"
          :diyRight="true"
        >
          <template #left>
            <view class="menu_item" @click="handleClick(item)">
              <!-- <image  :src="item.url" mode="aspectFill"></image> -->
              <view style="width: 68rpx; height: 48rpx; flex-shrink: 0;">
                <uni-icons
                  v-if="activeData.userId === item.userId"
                  type="checkmarkempty"
                  color="red"
                  size="22"
                
                ></uni-icons>
              </view>
              <text class="item_text">{{ item.nickName }} （{{ item.mobile }}）</text>
            </view>
          </template>
          <template #right>
            <uni-icons
              type="trash-filled"
              color="red"
              size="22"
              @click="handleDelete(item)"
            ></uni-icons>
          </template>
        </i-lineRow>
      </view>
      <view class="bottom">
        <i-buttons
          color="#222"
          padding="16rpx 98rpx"
          border="1rpx solid #222"
          @click="checkUser"
          >切换账号</i-buttons
        >
        <i-buttons
          color="#fff"
          bgColor="#ff7800"
          border="1rpx solid #ff7800"
          padding="16rpx 128rpx "
          @click="handleLogin"
          :disabled="loading"
          >登录</i-buttons
        >
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { baseListByParent } from "../../api/index";
import {
  defineProps,
  defineEmits,
  ref,
  reactive,
  onMounted,
  watch,
  computed,
} from "vue";
import useStore from "../../stores/index";
import { getStorage, setStorage } from "../../utils/common";

const store = useStore();
const isLoginModal = computed(() => {
  return store.isLoginModal;
}); 
const loading = ref(false)
const activeData = ref<any>({});
const popup = ref<any>(null);
const userList = ref<any[]>([]);
watch(
  () => isLoginModal.value,
  (val) => {        
    if (val) {  

      popup.value.open(); 
      const oldUserList = getStorage("userList");
      userList.value = oldUserList;
      activeData.value = oldUserList[0];
      uni.hideTabBar();
      
    } else {
      popup.value.close();
      uni.showTabBar();
    }
  }
);
const change = (e) => {
  if (!e.show) {
    store.setIsLoginModal(false);
  }
};
const bindChange = () => {};
const handleDelete = (item) => {
  uni.showModal({
    title: "提示",
    content: "是否删除当前账号",
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        const newList = userList.value.filter((i) => i.userId !== item.userId);
        // // if (activeData.userId === )
        if (activeData.value.userId === item.userId) {
          activeData.value = {}
        }
        userList.value = newList;
        setStorage("userList", newList);
      }
    },
  });
};
const handleClick = (item) => {
  activeData.value = item;
};
const handleLogin = async () => {
  if (!activeData.value.userId) {
    uni.navigateTo({
      url: "/pages/views/login",
    });
    return;
  }
  loading.value= true
  setStorage("token", activeData.value.token);
  setStorage("userId", activeData.value.userId);
  uni.showLoading({
    title: '登录中...',
    mask: true
  })
  await store.setUserInfo();
  uni.hideLoading()
  loading.value = false
  const userList = getStorage("userList");
      const token = getStorage("token");
      const index = userList.findIndex(u => u.token === token);
    if (index > 0) {
      const [matched] = userList.splice(index, 1);
      userList.unshift(matched);
    }
      setStorage('userList', userList)

};
const checkUser = () => {
  uni.navigateTo({
    url: "/pages/views/login",
  });
  store.setIsLoginModal(false);
};
</script>

<style lang="scss" scoped>
.i-loginModal {
  position: relative;
  .picker {
    background-color: #fff;
    width: 100%;
    height: 680rpx;
    border-top: 1rpx solid #f3f4f5;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 40rpx;
    padding: 24rpx 0 0 0;

    .title {
      padding: 0 32rpx;
      @include flexC;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f3f4f5;
      @include titlefont(32rpx);

      .confirm {
        color: #666;
        font-size: 24rpx;
      }
    }
    .menu_item {
      @include dfont(28rpx);
      margin-top: 12rpx;
      @include flexR;
      width: 70vw;
      .item_text {
        @include overflow;
      }
    }
    .picker-view {
      height: 480rpx;
      margin-bottom: 80rpx;
    }

    .item {
      @include dfont;
      text-align: center;
      white-space: nowrap;
      line-height: 34px;
    }
  }
}
.bottom {
  width: 100%;
  margin: 32rpx 0;
  @include flexRS;
  padding: 24rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: 12rpx;
}

.scroll {
  height: 380rpx;
  overflow-y: auto;
}
</style>
